import React, { createContext, useContext, useState } from 'react';

/**
 * useContext Hook示例组件
 * 
 * 这个组件展示了React useContext Hook的使用方式：
 * 1. 创建上下文
 * 2. 提供上下文值
 * 3. 在嵌套组件中消费上下文
 * 4. 更新上下文值
 * 5. 多个上下文的使用
 */

// 创建主题上下文
const ThemeContext = createContext();

// 创建用户上下文
const UserContext = createContext();

// 主题提供者组件
function ThemeProvider({ children }) {
  // 状态用于存储当前主题
  const [theme, setTheme] = useState({
    mode: 'light',
    primary: '#007bff',
    background: '#ffffff',
    text: '#333333'
  });

  // 切换主题函数
  const toggleTheme = () => {
    setTheme(prevTheme => ({
      mode: prevTheme.mode === 'light' ? 'dark' : 'light',
      primary: prevTheme.mode === 'light' ? '#90caf9' : '#007bff',
      background: prevTheme.mode === 'light' ? '#333333' : '#ffffff',
      text: prevTheme.mode === 'light' ? '#ffffff' : '#333333'
    }));
  };

  // 提供主题上下文和切换函数
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// 用户提供者组件
function UserProvider({ children }) {
  // 状态用于存储当前用户
  const [user, setUser] = useState({
    name: '游客',
    isLoggedIn: false
  });

  // 登录函数
  const login = (username) => {
    setUser({
      name: username,
      isLoggedIn: true
    });
  };

  // 登出函数
  const logout = () => {
    setUser({
      name: '游客',
      isLoggedIn: false
    });
  };

  // 提供用户上下文和相关函数
  return (
    <UserContext.Provider value={{ user, login, logout }}>
      {children}
    </UserContext.Provider>
  );
}

// 使用主题的组件
function ThemedButton() {
  // 使用useContext获取主题上下文
  const { theme, toggleTheme } = useContext(ThemeContext);
  
  // 根据主题设置按钮样式
  const buttonStyle = {
    backgroundColor: theme.primary,
    color: theme.mode === 'light' ? '#ffffff' : '#000000',
    padding: '10px 15px',
    border: 'none',
    borderRadius: '4px',
    cursor: 'pointer'
  };
  
  return (
    <button style={buttonStyle} onClick={toggleTheme}>
      切换到{theme.mode === 'light' ? '深色' : '浅色'}主题
    </button>
  );
}

// 使用用户上下文的组件
function UserProfile() {
  // 使用useContext获取用户上下文
  const { user, login, logout } = useContext(UserContext);
  // 使用useContext获取主题上下文
  const { theme } = useContext(ThemeContext);
  
  // 根据主题设置样式
  const profileStyle = {
    backgroundColor: theme.background,
    color: theme.text,
    padding: '15px',
    borderRadius: '8px',
    marginTop: '10px'
  };
  
  // 处理登录
  const handleLogin = () => {
    const username = prompt('请输入用户名:');
    if (username) {
      login(username);
    }
  };
  
  return (
    <div style={profileStyle}>
      <h3>用户信息</h3>
      <p>名称: {user.name}</p>
      <p>状态: {user.isLoggedIn ? '已登录' : '未登录'}</p>
      
      {user.isLoggedIn ? (
        <button onClick={logout}>登出</button>
      ) : (
        <button onClick={handleLogin}>登录</button>
      )}
    </div>
  );
}

// 深层嵌套组件，同时使用两个上下文
function DeepNestedComponent() {
  // 使用useContext获取两个上下文
  const { theme } = useContext(ThemeContext);
  const { user } = useContext(UserContext);
  
  const style = {
    backgroundColor: theme.mode === 'light' ? '#f0f0f0' : '#555555',
    color: theme.text,
    padding: '10px',
    borderRadius: '4px',
    marginTop: '10px'
  };
  
  return (
    <div style={style}>
      <h4>深层嵌套组件</h4>
      <p>当前主题: {theme.mode}</p>
      <p>当前用户: {user.name}</p>
      <p>这个组件展示了即使在深层嵌套中，也可以轻松访问上下文数据</p>
    </div>
  );
}

// 主组件，组合所有上下文和消费组件
function UseContextExample() {
  return (
    <div className="hook-example">
      <h2>useContext Hook 示例</h2>
      
      {/* 嵌套上下文提供者 */}
      <ThemeProvider>
        <UserProvider>
          <div className="context-demo">
            <section>
              <h3>主题切换示例</h3>
              <ThemedButton />
            </section>
            
            <section>
              <h3>用户上下文示例</h3>
              <UserProfile />
            </section>
            
            <section>
              <h3>多上下文使用示例</h3>
              <DeepNestedComponent />
            </section>
          </div>
        </UserProvider>
      </ThemeProvider>
      
      <div className="explanation">
        <h3>useContext Hook 说明:</h3>
        <ul>
          <li><code>const context = createContext(defaultValue)</code> - 创建一个上下文</li>
          <li><code>&lt;Context.Provider value=&#123;value&#125;&gt;</code> - 提供上下文值给子组件</li>
          <li><code>const value = useContext(Context)</code> - 在函数组件中消费上下文</li>
          <li>上下文适用于向组件树深处传递数据，避免"属性钻取"问题</li>
          <li>常见用例: 主题、用户认证、语言偏好、状态管理等</li>
          <li>当上下文值变化时，所有使用该上下文的组件都会重新渲染</li>
        </ul>
      </div>
    </div>
  );
}

export default UseContextExample;